import React, { } from 'react'
import {useHistory} from 'react-router-dom'
 
import './Login.scss'

export default () => {
    const history = useHistory()

    function clickHandeler() {
        history.push("/");
    }

    return (
        <>
            <div className="login">
                <div className="login-header">
                    <div className="login-header-nav" onClick={clickHandeler}>
                        <span className="header-nav-icon li-iconfont li-icon-left"></span>
                    </div>
                    <div className="login-header-title">欢迎来到摄图</div>
                </div>
                <div className="login-body">
                    <div className="body-phone">
                        <span className="phone-icon li-iconfont li-icon-shoujihao"></span>
                        <input placeholder="请输入手机号码"></input>
                    </div>
                    <div className="body-code">
                        <span className="code-icon li-iconfont li-icon-yanzhengma"></span>
                        <input placeholder="请输入验证码"></input>
                        <div className="code-button">获取验证</div>
                    </div>
                    <div className="body-text">
                        <p>未注册的手机号验证后自动创建摄图账号</p>
                    </div>
                    <div className="body-button">
                        <button>登录</button>
                    </div>
                    <div className="body-other">
                        <div className="body-other-weixin">
                            <span className="icon-weixin li-iconfont li-icon-iconset0140"></span>
                            <p>微信</p>
                        </div>
                        <div className="body-other-l">|</div>
                        <div className="body-other-qq">
                            <span className="icon-weixin li-iconfont li-icon-qq"></span>
                            <p>QQ</p>
                        </div>
                    </div>
                </div>
                <div className="login-footer">
                    <span className="login-footer-left">登录即同意 </span>
                    <span className="login-footer-right">用户协议</span>
                </div>
            </div>
        </>
    )
}